<template>
  <el-container class="formDesign">
    <el-aside class="formDesignSide">
      <UnitPanel :designer="designer" />
    </el-aside>
    <el-container>
      <el-header style="height: 42px">
        <ToolbarPanel :designer="designer" />
      </el-header>
      <el-main>
        <UnitForm :designer="designer" />
      </el-main>
    </el-container>
    <el-aside class="formDesignConfig">
      <ConfigPanel :designer="designer" />
    </el-aside>
  </el-container>
</template>

<script>
/* eslint-disable vue/require-default-prop */
/* eslint-disable eol-last */
import ToolbarPanel from "./components/toolbar_panel";
import UnitPanel from "./components/unit_panel";
import UnitForm from "./components/unit_form";
import ConfigPanel from "./components/config_panel";
import createDesigner from "./designer";
import "./style.scss";
export default {
  components: {
    UnitPanel,
    UnitForm,
    ToolbarPanel,
    ConfigPanel,
  },
  props: {
    formJson: String,
    designerConfig: {
      type: Object,
      default: () => {
        return {
          languageMenu: true, // 是否显示语言切换菜单
          externalLink: true, // 是否显示GitHub、文档等外部链接
          formTemplates: true, // 是否显示表单模板
          eventCollapse: true, // 是否显示组件事件属性折叠面板
          widgetNameReadonly: false, // 禁止修改组件名称

          clearDesignerButton: true, // 是否显示清空设计器按钮
          previewFormButton: true, // 是否显示预览表单按钮
          importJsonButton: true, // 是否显示导入JSON按钮
          exportJsonButton: true, // 是否显示导出JSON器按钮
          exportCodeButton: true, // 是否显示导出代码按钮
          generateSFCButton: true, // 是否显示生成SFC按钮
          toolbarMaxWidth: 420, // 设计器工具按钮栏最大宽度（单位像素）
          toolbarMinWidth: 300, // 设计器工具按钮栏最小宽度（单位像素）

          presetCssCode: "", // 设计器预设CSS样式代码

          resetFormJson: false, // 是否在设计器初始化时将表单内容重置为空
        };
      },
    },
  },
  data() {
    return {
      designer: createDesigner(this),
    };
  },
  computed: {
    fieldLib: {
      cache: false,
      get() {
        return this.designer.fieldLib;
      },
    },
  },
  watch: {
    // fieldLib: {
    //   handler(n) {
    //     console.log("root", n);
    //   },
    //   deep: true,
    // },
    formJson(n) {
      // console.log(n);
      if (n) this.designer.loadFormJson(JSON.parse(n));
    },
  },
  provide() {
    return {
      serverFieldList: () => [],
      $designer: () => this.designer,
      getDesignerConfig: () => this.designerConfig,
    };
  },
  mounted() {
    // this.designer = createDesigner(this);
    this.designer.uploadBase = this.$config.proxy.key;
    this.designer.saveForm = this.saveForm;
    this.designer.previewForm = this.previewForm;
  },
  methods: {
    saveForm() {
      const Obj = this.designer.exportJson();
      // console.log(Obj);
      this.$emit("onSave", Obj);
    },
    previewForm() {
      this.$emit("onRender", this.designer.exportJson());
    },
  },
};
</script>

<style lang="scss" scoped>
.el-main {
  // background-color: #f1f2f3;
  padding: 0;
}
.formDesign {
  height: 100%;
}
</style>